<template>
  <div class="duty_check">
    <van-tabs
      @click="onTabsClick"
      class="cont-tab"
      v-model="search.approveStatus"
      :sticky="true"
      line-width="35"
      line-height="2"
      title-active-color="#d80a06"
      title-inactive-color="#333333"
      border
      swipeable>
      <van-tab title="待审批" name="1"></van-tab>
      <van-tab title="已审批" name="2"></van-tab>
    </van-tabs>
    <van-list
      v-model="loading"
      :finished="finished"
      :finished-text="ExtraParmas.length ? '没有更多了' : ''"
      @load="getCheckList">
      <div class="list_con_main" v-if="ExtraParmas.length">
        <div v-for="item in ExtraParmas" :key="item.id" @click="goDetail(item)">
          <div class="bonus_one">
            <div class="list_con_text">
              <span>{{ item.formName }}</span>
              <!-- <span class="center_status" v-if="item.regStatus === '1'">补录</span> -->
              <span class="center_status" v-if="item.isCanceled === '1'">已销假</span>
            </div>
            <div class="time">{{ item.createTime }}</div>
          </div>
          <div class="spot_list_tip">
            <div
              :class="
                item.dailyStatus == '0' ? 'r_btn_red' : item.dailyStatus == '1' ? 'r_btn_success' : 'r_btn_primary'
              "
              class="spot_list_type">
              {{ item.statusDesc }}
            </div>
          </div>
        </div>
      </div>
      <van-empty v-if="ExtraParmas.length == 0" description="暂无数据" />
    </van-list>
  </div>
</template>

<script>
import { listAttendanceApprove } from '@api/api-attendance.js'
export default {
  name: 'DutyCheckList',
  components: {},
  data() {
    return {
      ExtraParmas: [],
      loading: false,
      finished: false,
      tablePage: {
        currentPage: 1,
        pageSize: 8,
        totalResult: 0,
      },
      search: {
        approveStatus: '1',
      },
      rotePage: 'DutyCheckList',
    }
  },
  created() {
    let routeLength = this.rotePage.length
    if (this.$store.state.pageTabTwo.substring(0, routeLength) == this.rotePage) {
      this.search.approveStatus = this.$store.state.pageTabTwo.substring(this.rotePage.length)
    }
  },
  mounted() {},
  methods: {
    getCheckList() {
      //获取已申报列表
      this.loading = true
      this.finished = false
      listAttendanceApprove({
        currentPage: this.tablePage.currentPage,
        pageSize: this.tablePage.pageSize,
        param: { ...this.search },
      })
        .then(res => {
          if (res.status == 200) {
            this.ExtraParmas.push(...res.data.content)
            this.tablePage.totalResult = res.data.totalSize
            this.tablePage.currentPage++
            this.loading = false
            if (this.ExtraParmas.length === this.tablePage.totalResult) {
              this.finished = true
            }
          }
        })
        .catch(err => {
          this.loading = false
          this.finished = true
        })
    },
    onTabsClick() {
      this.$store.state.pageTabTwo = this.rotePage + this.search.approveStatus
      this.tablePage.currentPage = 1
      this.ExtraParmas = []
      this.getCheckList()
    },
    goDetail(item) {
      let type = item.canApprove == '1' ? '1' : '3'
      this.$router.push({
        path: '/detailOutDuty',
        query: {
          id: item.dailyId,
          formId: item.formId,
          processInstanceId: item.processInstanceId,
          taskId: item.taskId,
          type: type,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.duty_check {
  font-size: 13px;
  /deep/.van-tab__text {
    line-height: 30px;
    font-size: 13px;
  }
  .list_con_main {
    padding: 0 16px;
    .bonus_one_org {
      font-size: 12px;
      color: #666;
      margin: 8px 0;
      .icontouxiang6 {
        font-size: 18px;
        color: #666;
        margin-top: 5px;
      }
      .oragn_name {
        margin-left: 5px;
      }
      .username {
        margin-left: 5px;
      }
    }
    .r_btn_success {
      color: #67c23a;
    }
    .r_btn_primary {
      color: #ee792f;
    }
    .r_btn_red {
      color: #f56c6c;
    }
    .bonus_one {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // height: 25px;
      margin: 8px 0 5px;
    }
    .list_con_text {
      font-size: 13px;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1;
    }
    .center_status {
      border-radius: 3px;
      padding: 1px 2px;
      font-size: 12px;
      border: 1px solid #ececec;
      color: #7d27a0;
      margin-right: 8px;
    }
    .spot_list_type {
      font-size: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .spot_list_tip {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      border-bottom: 1px solid #efefef;
      padding-bottom: 8px;
      .list_tip {
        height: 40px;
        background-color: #fdf1dd;
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
        padding: 10px;
      }
    }
  }
}
</style>
